<template>
	<view class="sec-body">
		<view class="fiexd-top">
			<view class="left-part">
				<label class="my-label">日期</label>
				<text>{{BTIME}}</text>
				<text class="divider"> - </text>
				<text>{{ETIME}}</text>
			</view>
			<view class="filter" @tap="showPopup">筛选 <uni-icon class="my-arrow-down" :class="active?'rotateArrow':''"  type="arrowdown" size="16"></uni-icon></view>
		</view>
		
		<luPopupWrapper ref="luPopupWrapper" 
			class="my-lu-popup"
		    type="top"
		    transition="slider"
		    backgroundColor="#fff"
			width='100%'
			height="100%"
			:top="luTop"
		    :active="active"
		    popupId="my-popup1"
		    :maskShow="true"
		    :maskClick="true">
			<view class="content">
				<form class="uni-form">
					<view class="uni-form-item uni-column">
						<label class="title">开始日期</label>
						<picker class="my-picker" :value="form.startDate" mode="date" @change="changeStart">
							<view  class="uni-input">{{form.startDate}}</view>
						</picker>
					</view>
					<view class="uni-form-item uni-column">
						<label class="title">结束日期</label>
						<picker class="my-picker" :value="form.endDate" mode="date" @change="changeEnd">
							<view  class="uni-input">{{form.endDate}}</view>
						</picker>
					</view>
				</form>
				
				<view class="button-group">
					<button class="mini-btn" type="default" size="mini" @tap="closePopup">关闭</button>
					<button class="mini-btn margin-left-btn" type="primary" size="mini" @tap="confirmPopup">确定</button>
				</view>
			</view>
		</luPopupWrapper>
		
		<!-- 内容 -->
		<scroll-view class="uni-scroll-view-list sec-uni-scroll-view-list" scroll-y lower-threshold="50" @scrolltolower="loadMore">
			
			<view class="my-collapse" v-if="listArr.length">
				<view class="my-collapse-item" v-for="(item,index) in listArr" :key="index">
					<view class="item-top">
						<view class="item-left  item-line">
							<view class="title">
								<view>
									<label>姓名</label>
									<text>{{item.AAC003}}</text>
								</view>
								<view>
									<label>备案号</label>
									<text>{{item.AAZ267}}</text>
								</view>
							</view>
							<view>
								<label>医院名称</label>
								<text>{{item.AKB021}}</text>
							</view>
							<view>
								<label>审报日期</label>
								<text>{{item.AAE036}}</text>
							</view>
						</view>
						<view class="item-right">
							<uni-tag type="default" text="未审核" v-if="item.AAE016 ==0"></uni-tag>
							<uni-tag type="success" text="审核通过" v-else-if="item.AAE016 ==1"></uni-tag>
							<uni-tag type="warning" text="驳回" v-else></uni-tag>
							<view class="arrow-wrap" @tap="changeShow(item)">
								<uni-icon class="my-arrow-down my-arrow-down2" :class="item.expand?'rotateArrow':''"  type="arrowdown"></uni-icon>
							</view>
						</view>
					</view>
					<view class="item-bottom" :class="{'item-bottom-open':item.expand}">
						<view class=" item-line">
							<view><label>险种大类</label><text>{{item.AAE140}}</text></view>
							<view><label>结算流水号</label><text>{{item.AAZ216}}</text></view>
							<view><label>住院流水号</label><text>{{item.AKC190}}</text></view>
							<view><label>医疗类别</label><text>{{item.AKA130}}</text></view>
							<view><label>单据号</label><text>{{item.AAE072}}</text></view>
							<view><label>单位编号</label><text>{{item.AAB999}}</text></view>
							<view><label>单位名称</label><text>{{item.AAB069}}</text></view>
							<view><label>身份证号</label><text>{{item.AAC002}}</text></view>
							<view><label>个人编码</label><text>{{item.AAC001}}</text></view>
							<view><label>入院日期</label><text>{{item.AAE372}}</text></view>
							<view><label>出院日期</label><text>{{item.AAE373}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="listArr.length" :status="status" :contentText="contentTxt"></uni-load-more>
			<view v-if="!listArr.length"  style="padding:100upx 16upx;text-align: center;">
				<image src="../../static/image/order.png" mode="widthFix" style="width:180upx;"></image>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import luPopupWrapper from "@/components/lu-popup-wrapper/lu-popup-wrapper.vue";
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	export default {
		components: { uniTag,uniLoadMore,uniCollapse,uniCollapseItem,uniIcon,luPopupWrapper },
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				luTop:'36px',
				active:false,
				BTIME:currentDate,
				ETIME:currentDate,
				form:{
					startDate:currentDate,
					endDate:currentDate,
				},
				pageIndex:1,
				totalPage:1,
				status:'more',
				contentTxt:{
					contentdown: "查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多",
				},
				listArr:[],
				
			}
		},
		methods: {
			changeShow(item){
				item.expand = !item.expand;
			},
			confirmPopup(){
				if(!this.form.startDate||!this.form.endDate){
					uni.showToast({
						title:'请选择日期',
						image:'../../static/image/info.png',
						duration:2500
					});
					return false;
				}
				
				this.BTIME=this.form.startDate;
				this.ETIME=this.form.endDate;
				this.closePopup();
				this.pageIndex = 1;
				this.getData();
			},
			closePopup(){
				this.active = false;
				this.$refs.luPopupWrapper.close();
			},
			showPopup(){
				if(!this.active){
					this.active = true;
					this.$refs.luPopupWrapper.show();
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changeStart(e){
				this.form.startDate = e.target.value
			},
			changeEnd(e){
				this.form.endDate = e.target.value
			},
			getData(){
				var self = this;
				self.status = 'loading'
				//传日期 的题格式是  YYYYMMDD 加中间没有横杠它不认
				this.$request('S1004',{PAGENUM:this.pageIndex,PAGESIZE:this.totalPage},'POST',function(res){
					console.log(res);
					if(res.data.CODE=='0'){
						for(var i=0;i<res.data.DATA.length;i++){
							self.$set(res.data.DATA[i],'expand',false);
						}
						self.listArr = self.listArr.concat(res.data.DATA);
						if(res.data.PAGENUM == res.data.PAGESIZE){
							self.status = 'noMore'
						}else{
							self.status = 'more'
						}
						
					}
				})
			},
			loadMore(){
				if(this.pageIndex<this.totalPage){
					this.pageIndex++;
					if(this.pageIndex>this.totalPage){
						this.pageIndex=this.totalPage;
					}
					this.getData();
				}
			}
		},
		mounted(){
			this.getData();
		},
		onShow(){
			// #ifdef H5
			this.luTop = '80px';
			// #endif
			
			// #ifdef APP-PLUS || MP
			this.luTop = '36px';
			// #endif
		}
	}
</script>

<style lang="scss">

</style>
